<template>
  <el-dialog
    :visible="opetatorDialog"
    :before-close="handleClose"
    :show-close="true"
    :close="handleClose"
    :class="{'mobile-el-dialog':isMobile}"
    class="small-common-dialog-size operator-dialog"
  >
    <Title :title="title" style="margin-bottom:16px" font-size="16px"/>
    <div class="user-list">
      <div v-for="(item,index) in userList" :key="index" class="item">
        <CheckUserInfo :label="item[valueName]" :user-id="item.id" >
          <div class="flex">
            <el-image :src="!!item.avatar?item.avatar:defaultAvatar" fit="fit" alt="" class="img"/>
            <el-tooltip v-if="item[valueName] && item[valueName].length>3" :content="item[valueName]">
              <div class="ellipsisOne" style="width:80px">{{ item[valueName] }}</div>
            </el-tooltip>
            <span v-else>{{ item[valueName] }}</span>
          </div>
        </CheckUserInfo>
      </div>
    </div>
    <div class="center">
      <el-button
        class="back-btn cancel-btn-style"
        type="info"
        size="small"
        @click="handleClose"
      >关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import defaultAvatar from '@/assets/user-avatar.png';

export default { components: {
  Title
},
props: {
  userList: {
    type: Array,
    default: null
  },
  isMobile: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '所有人员'
  },
  valueName: {
    type: String,
    default: 'value'
  }
},
data() {
  return {
    defaultAvatar,
    opetatorDialog: false
  };
},
methods: {
  openDialog() {
    this.opetatorDialog = true;
  },
  handleClose() {
    this.opetatorDialog = false;
  }
}
};
</script>

<style lang="scss" scoped>
  .operator-dialog{
    .flex {
      display: flex;
      align-items: center;
    }
    .user-list{
      display: flex;
      min-width: 200px;
      max-height: 140px;
      flex-wrap: wrap;
      @include scrollBar(auto, auto, 6px);
      .item{
        display: flex;
        align-items: center;
        flex-basis: calc(100% / 3);
        margin-bottom: 12px;
      }
      .img{
        width: 24px;
        height: 24px;
        border-radius:50% ;
        margin-right: 4px;
      }
    }
    .center{
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
</style>
